<template>
    <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px" label-width="70px" @submit.native.prevent>
            <el-form-item label="归属学校" prop="schoolId" v-if="tenantId == 1">
                <el-select v-model="queryParams.schoolId" placeholder="请选择" class="!w-240px" clearable>
                    <el-option v-for="item in schools" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="授课老师" prop="name">
                <el-input v-model="queryParams.name" class="!w-240px" clearable placeholder="请输入授课老师名称" @keyup.enter="handleQuery"/>
            </el-form-item>
            <el-form-item label="专业" prop="majorId">
                <el-select v-model="queryParams.majorId" placeholder="请选择专业" clearable>
                    <el-option v-for="item in majors" :label="item.name" :value="item.id"/>
                </el-select>
            </el-form-item>
            <el-form-item label="上课时间" prop="classTime">
                <el-date-picker v-model="queryParams.classTime" unlink-panels value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                                start-placeholder="上课时间" end-placeholder="结束日期" class="!w-380px"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon class="mr-5px" icon="ep:search"/>
                    搜索
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh"/>
                    重置
                </el-button>
                <el-button v-hasPermi="['yxt:course:config:setting']" plain type="primary" @click="openSettingForm">
                    <Icon class="mr-5px" icon="ep:plus"/>
                    上课范围
                </el-button>
                <el-button v-hasPermi="['yxt:course:export']" type="success" plain @click="handleExport" :loading="exportLoading">
                    <Icon icon="ep:download"/>
                    导出
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
        <el-table v-loading="loading" :data="list">
            <el-table-column label="授课老师" prop="name" min-width="100"/>
            <el-table-column label="专业" prop="majorName" min-width="100"/>
            <el-table-column label="学校" prop="schoolName" min-width="150"/>
            <el-table-column label="上课人数" prop="count" min-width="100"/>
            <el-table-column label="课后总结" prop="summary" min-width="220" show-overflow-tooltip/>
            <el-table-column label="课后图片" prop="picture" width="50">
                <template #default="scope">
                    <div v-if="scope.row.picture" style="width: 36px; height: 36px">
                        <el-image :src="scope.row.picture" :preview-src-list="[scope.row.picture]" preview-teleported hide-on-click-modal/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column :formatter="dateFormatter" align="center" label="开课时间" prop="startTime" min-width="180"/>
            <el-table-column :width="120" align="center" label="操作" fixed="right">
                <template #default="scope">
                    <el-button v-hasPermi="['yxt:course:detail']" link type="primary" @click="openForm(scope.row)">
                        上课详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total" @pagination="getList"/>
    </ContentWrap>

    <CourseDetail ref="detailRef"/>
    <SignSetting ref="signSettingRef"/>
</template>

<script lang="ts" setup>
import {dateFormatter} from '@/utils/formatTime'
import {useCourseApi} from "@/api/yxt/course";
import {useMajorApi} from "@/api/yxt/major";
import CourseDetail from "@/views/yxt/course/CourseDetail.vue";
import download from "@/utils/download";
import {useConfirm} from "@/components/Notice";
import SignSetting from "@/views/yxt/course/SignSetting.vue";
import {getTenantId} from "@/utils/auth";
import {useSchoolApi} from "@/api/yxt/school";

defineOptions({name: 'YxtCourse'})

const tenantId = getTenantId();

const {t} = useI18n()
const majorApi = useMajorApi();
const schoolApi = useSchoolApi();
const courseApi = useCourseApi();

const loading = ref(true)
const total = ref(0)
const list = ref([])
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    schoolId: '',
    name: '',
    majorId: undefined,
    classTime: []
})
const queryFormRef = ref()
const majors = ref<Array<any>>([])
const schools = ref<Array<any>>([])

const getList = async () => {
    loading.value = true
    try {
        const data = await courseApi.getPage(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}

const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
}

const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}

const exportLoading = ref(false)
const handleExport = async () => {
    useConfirm(t("common.exportMessage"), async () => {
        exportLoading.value = true
        try {
            const data = await courseApi.export(queryParams)
            download.excel(data, '课程数据.xls')
        } finally {
            exportLoading.value = false
        }
    });
}

const detailRef = ref()
const openForm = (row: any) => {
    detailRef.value.open(row)
}

const signSettingRef = ref();
const openSettingForm = () => {
    signSettingRef.value.open();
}

onMounted(async () => {
    await getList()
    majors.value = await majorApi.getMajorList();
    schools.value = await schoolApi.getSimpleList();
})
</script>
